<template>
	<view class="layout">
		<view class="navBar">
			<view class="statusBar" :style="{height:statusBarHeight()+'px'}">
				<!-- 状态栏只占高度 没有内容 -->
			</view>
			<view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
				<view class="title">
					{{title}}
				</view>
				<view class="search" @click="goToSearch">
					<uni-icons type="search" color="#888" size="18" class="icon"></uni-icons>
					<text class="text">搜索</text>
				</view>
			</view>
		</view>
		<!-- fill 作为  填充块 占位置  避免 banner被bar遮住 -->
		<view class="fill" :style="{height:getNavBarHeight()+'px'}"></view>
		
	</view>
</template>

<script setup>
	import {statusBarHeight,getTitleBarHeight,getNavBarHeight} from '@/utils/system.js';
	const props=defineProps({
		title:{
			type:String,
			defualt:"壁纸"
		}
	})
	console.log('props',props.title)
		
	const goToSearch=()=>{
		uni.navigateTo({
			url:"/pages/search/search"
		})
	}
	// export default {
	// 	name:"CustomNavBar",
	// 	data() {
	// 		return {
				
	// 		};
	// 	}
	// }
	// let SYSTEM_INFO= uni.getSystemInfoSync();
	//statusBarHeight 顶部安全高度 单位 是px
	// uniplatform 是 当前平台
	// let statusBarHeight=ref(SYSTEM_INFO.statusBarHeight)
	// console.log('sysytem',SYSTEM_INFO.statusBarHeight)//44
	//   let {top,height} = uni.getMenuButtonBoundingClientRect()
	  // 48,32
	  //  statusBarHeight 已经是 44，说明 按钮和顶部状态栏之间还有 4px 间距
	  // button 32+4*2（上下间距） =40 ，
// console.log('menuButtonInfo',menuButtonInfo)
// let titleBarHeight=  ref((top-statusBarHeight.value)*2+height);
</script>

<style lang="scss" scoped>
.layout{
	// height:10vh;

	.navBar{
		//  固定定位
		position:fixed;
		left:0;
		top:0;
		width:100%;
		z-index:10;
		background:
		linear-gradient(to bottom,transparent,#fff 400rpx),
		linear-gradient(to right,#beecd8 20%,#f4e2d8);
		
		.statusBar{
			// border:1px solid red;
			
		}
		.titleBar{
			display:flex;
			align-items:center;
			// border:1px solid green;
			padding: 0 30rpx;
			// 高度 要系统获取
			// height:100rpx;
			.title{
				font-size:22px;
				font-weight:700;
				color:$text-font-color-1;
			}
			.search{
				width:220rpx;
				height:50rpx;
				border-radius:60rpx;
				background: rgba(255,255,255,0.4);
				border:1px solid #fff;
				margin-left:30rpx;
				color:#999;
				font-size:28rpx;
				display: flex;
				align-items:center;
				.icon{
					margin-left:5rpx;
					
				}
				.text{
					padding-left:10rpx;
				}
				
			}
		}
	}
}

</style>